import React, { Component } from 'react'
import {
	View,
	Alert,
	TouchableOpacity,
	StyleSheet,
	Clipboard,
	ImageBackground,
	CameraRoll,
	Platform,
	DeviceEventEmitter
} from 'react-native'
import { Root, Container, Content, Toast } from 'native-base'
import ShareCom from '../../components/share'
import Forbiduser from '../../components/forbiduser'
import commonStyle from '../../libs/commonStyle'
import RTitle from './component/title'
import RText from './component/text'
import RBtn from './component/btn'
import CardContainer from './component/cardContainer'
import ShareCode from './component/shareQRcode'
import ShareIncome from './component/shareIncome'

import { connect } from 'react-redux'

import API from '../../api/request'

class Recruit extends Component {
	constructor(props) {
		super(props)
		this.state = {
			qrcode: false,
			shareInfo: {},
			webpageUrl: 'http://thinkleaf.cn/web/download.html'
		}
	}
	// 显示提示信息
	showMessage(text) {
		Toast.show({
			text: text,
			textStyle: {
				textAlign: 'center'
			},
			duration: 1000,
			type: 'success'
		})
	}
	componentDidMount() {
		this.updateWebpageurl()
		DeviceEventEmitter.addListener('forbid.user', () => {
			global.Pop.show(<Forbiduser wechat={this.props.serviceInfo.wechat} />,{animationType: 'slide-up'})
		})
	}
	// 更新分享链接
	async updateWebpageurl () {
		const { userId } = this.props.user || {}
		let webpageUrl = await this.getData(userId)
		this.setState({
			webpageUrl
		})
	}
	// 保存相册
	async saveImageTo(uri, isshare) {
		CameraRoll.saveToCameraRoll(uri).then((link) => {
			if (isshare) {
				this.shareImageFn(link)
				return 
			}
			this.showMessage('保存成功')
		})
	}
	shareImageFn (link) {
		this.setState({
			shareInfo: {
				imageUrl: link,
				type: 'imageFile'
			}
		})
		this.showShareDialog(false)
	}
	// 获取分享链接
	async getData(userId) {
		let res = await API.get('/api/skip/downloadJump', { myid: userId })
		if (res && res.code === '200') {
			return res.data
		}
	}
	getShareinfo(params = {}) {
		let {title, thumbImage, description, type} = params
		return {
			title: title || '玩玩手机就能赚钱，发新闻，赚现金，秒到账',
			thumbImage: thumbImage ||
				'https://ojlty2hua.qnssl.com/image-1552622554103-aWNvbi0wNi5wbmc=.png',
			description: description ||
				'平台靠谱，稳定，提现快！亲测可信，快来一起赚钱吧',
			webpageUrl: this.state.webpageUrl,
			type: type || 'news'
		}
	}

	onShareImage() {
		this.refs.shareImageCom.onShowPopup.bind(this.refs.shareImageCom)()
	}
	copy(text) {
		Clipboard.setString(String(text))
		this.showMessage('复制成功')
	}
	showShareDialog(flag) {
		this.setState({
			qrcode: !!flag
		})
		this.refs.sharePanelCom.toggleDialog.bind(this.refs.sharePanelCom)()
	}
	render() {
		const { userId } = this.props.user || {}
		const { totalIncome } = this.props.incomeStat || {}

		return (
			<Root>
				<Container>
					<Content>
						<ImageBackground
							resizeMode="cover"
							style={[
								commonStyle.wp100,
								{
									height: 400
								}
							]}
// 							source={{
// 								uri:
// 									'https://ojlty2hua.qnssl.com/image-1552697945333-5pS25b6S6aG15rW35oqlLmpwZw==.jpg'
// 							}}
							source={require('../../../assets/imgs/recruit-bg.jpg')}
						>
							<TouchableOpacity
								style={[
									commonStyle.wp50,
									commonStyle.h200,
									commonStyle.mt100,
									{
										marginLeft: '25%'
									}
								]}
								onPress={async () => {
									// await this.updateWebpageurl()
									this.setState({
										shareInfo: this.getShareinfo()
									})
									this.showShareDialog(true)
								}}
							/>
						</ImageBackground>
						<View style={[commonStyle.p200]}>
							<RTitle title="分享链接收徒" />
							<CardContainer>
								<RText title="分享链接到微信群、微信朋友圈，自动收徒" />
								<RBtn
									title="马上分享"
									onBtnHandle={async () => {
										// await this.updateWebpageurl()
										this.setState({
											shareInfo: this.getShareinfo()
										})
										this.showShareDialog(false)
									}}
								/>
							</CardContainer>

							<RTitle title="晒收入收徒" />
							<CardContainer>
								<View>
									<View
										style={[commonStyle.mt10, commonStyle.flexCenter]}
									>
										<ShareIncome
											ref="incomeImage"
											totalIncome={totalIncome}
											userId={userId}
											shareLink={this.state.webpageUrl}
										/>
									</View>
									<View style={[
										commonStyle.flexRow, 
										commonStyle.mt20]}>
										<View style={[commonStyle.flexItem]}>
											<RText title="保存海报到相册，方便后续转发" />
											<RBtn
												title="保存到相册"
												onBtnHandle={async () => {
													let uri = await this.refs.incomeImage.saveImage.bind(
														this.refs.incomeImage
													)()
													this.saveImageTo(uri)
												}}
											/>
										</View>
										<View style={[commonStyle.flexItem, commonStyle.pl40]}>
											<RText title="分享海报到微信群、微信朋友圈，自动收徒" />
											<RBtn
												title="马上分享"
												onBtnHandle={async () => {
													let uri = await this.refs.incomeImage.saveImage.bind(
														this.refs.incomeImage
													)()
													if (Platform.OS === 'ios'){
														this.saveImageTo(uri, true)
													}else {
														this.shareImageFn(uri)
													}
													
												}}
											/>
										</View>
									</View>
								</View>
							</CardContainer>

							<RTitle title="二维码收徒" />
							<CardContainer>
								<View>
									<View
										style={[commonStyle.mt10, commonStyle.flexCenter]}
									>
										<ShareCode
											ref="qrcodeImage"
											shareLink={this.state.webpageUrl}
										/>
									</View>
									<View style={[
										commonStyle.flexRow, 
										commonStyle.mt20]}>
										<View style={[commonStyle.flexItem]}>
											<RText title="保存海报到相册，方便后续转发" />
											<RBtn
												title="保存到相册"
												onBtnHandle={async () => {
													let uri = await this.refs.qrcodeImage.saveImage.bind(
														this.refs.qrcodeImage
													)()
													this.saveImageTo(uri)
												}}
											/>
										</View>
										<View style={[commonStyle.flexItem, commonStyle.pl40]}>
											<RText title="分享海报到微信群、微信朋友圈，自动收徒" />
											<RBtn
												title="马上分享"
												onBtnHandle={async () => {
													let uri = await this.refs.qrcodeImage.saveImage.bind(
														this.refs.qrcodeImage
													)()
													if (Platform.OS === 'ios'){
														this.saveImageTo(uri, true)
													}else {
														this.shareImageFn(uri)
													}
												}}
											/>
										</View>
									</View>
								</View>
							</CardContainer>
						</View>
					</Content>
					<ShareCom
						ref="sharePanelCom"
						params={this.state.shareInfo}
						qrcode={this.state.qrcode}
					/>
				</Container>
			</Root>
		)
	}
}

const styles = StyleSheet.create({
	oper: {
		borderWidth: 0.5,
		borderRadius: 30
	}
})

export default connect(state => ({
	user: state.user.user,
	serviceInfo: state.login.serviceInfo,
	incomeStat: state.login.homeData
}))(Recruit)
